<template>
  <div class="specials">
    <!-- tab切换标签 -->
    <div class='tabs_area'>
      <span :class='showDay?"active":"left"' @click='changeSpecial(1)'>
        <div>天天惊喜特价</div>
        <div v-show="this.showDay" class='line'></div>
      </span>
      <span :class='showRoutine?"active":"right"' @click='changeSpecial(2)'>
        <div>常规特价</div>
        <div v-show="this.showRoutine" class='line'></div>
      </span>
      <span :class='showWeek?"active":"center"' @click='changeSpecial(3)'>
        <div>天天特价预告</div>
        <div v-show="this.showWeek" class='line'></div>
      </span>
    </div>
    <!-- //每日劲爆特价 -->
    <div class='daySpecials' v-if="this.showDay">
      <TopBar type='1' :dataSourse='dayBanner' :hours='hours' :minutes='minutes' :seconds='seconds' />
      <div class='sreach_area'>
        <div class='divtip'>
          <input type="text" v-model="everyDayKeyWord" placeholder="输入商品名、商品首字母、厂家">
          <div class='div' @click='search(everyDayKeyWord,"天天")'>搜索</div>
        </div>
      </div>
      <div class='goods_area' v-if="this.everyDayGoodsList">
        <div class='item_block' v-for="(item,index) of this.everyDayGoodsList" :key="index">
          <div class='left'>
            <img :src="item.img?item.img:'https://image.hezongyy.com/images/no_picture.gif'">
            <img class='tip' v-if="item.quantity<=0" src="https://image.hezongyy.com/pcimage/119h5/ysq.png">
          </div>
          <div class='right'>
            <div class='text1'>{{item.name}}</div>
            <div class='text2'>{{item.manufacturerName}}</div>
            <div class='text2'>规格：{{item.specification}}</div>
            <div class='text2'>效期：{{item.expirationDate}}</div>
            <div class='text2'>限购：{{item.maxBuyNumber}}</div>
            <div class='text3'>
              <span class='num'>{{item.activityPrice>0?'¥'+item.activityPrice:'定价中'}}</span><span class='num1'>¥{{item.retailPrice}}</span>
              <span class='btn' @click='showCards(item)'><img src="../../assets/image/jiagou.png"></span>
              <div class='couponAfterPrice' v-if="item.couponFloorPrice&&item.couponCeilingPrice">
                券后 {{'¥'+item.couponFloorPrice}}-{{'¥'+item.couponCeilingPrice}}
              </div>
              <div class='couponAfterPrice' v-if="!item.couponFloorPrice&&item.couponCeilingPrice">
                券后{{'¥'+item.couponCeilingPrice}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class='null_goods' v-else>
        <img src="https://image.hezongyy.com/pcimage/119h5/07.png">
        <div class='text'>暂无活动商品~</div>
      </div>
    </div>
    <!-- //常规特价 -->
    <div class='routineSpecials' v-if="this.showRoutine">
      <TopBar type='2' :dataSourse='routineBanner' />
      <div class='sreach_area'>
        <div class='divtip'>
          <input type="text" v-model="temp.keyWord" placeholder="输入商品名、商品首字母、厂家">
          <div class='div' @click='search(temp.keyWord,"常规")'>搜索</div>
        </div>
      </div>
      <div class='goods_area' v-if="this.routineGoodsList">
        <van-list v-model="loading" class="van_list" :finished="finished" finished-text="没有更多商品信息了" @load="promotionActivity(1)">
          <div class='item_block' v-for='(item,index) of this.routineGoodsList' :key='index'>
            <div class='left'>
              <img :src="item.img?item.img:'https://image.hezongyy.com/images/no_picture.gif'">
              <img class='tip' v-if="item.quantity<=0" src="https://image.hezongyy.com/pcimage/119h5/ysq.png">
            </div>
            <div class='right'>
              <div class='text1'>{{item.name}}</div>
              <div class='text2'>{{item.manufacturerName}}</div>
              <div class='text2'>规格：{{item.specification}}</div>
              <div class='text2'>效期：{{item.expirationDate}}</div>
              <div class='text2'>限购：{{item.maxBuyNumber}}</div>
              <div class='text3'>
                <span class='num'> {{item.sellingPrice>0?'¥'+item.sellingPrice:'定价中'}}</span><span class='num1'>¥{{item.retailPrice}}</span>
                <span class='btn' @click='showCards(item)'><img src="../../assets/image/jiagou.png"></span>
                <div class='couponAfterPrice' v-if="item.couponFloorPrice&&item.couponCeilingPrice">
                  券后 {{'¥'+item.couponFloorPrice}}-{{'¥'+item.couponCeilingPrice}}
                </div>
                <div class='couponAfterPrice' v-if="!item.couponFloorPrice&&item.couponCeilingPrice">
                  券后{{'¥'+item.couponCeilingPrice}}
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class='null_goods' v-if="this.routineGoodsList==0">
        <img src="https://image.hezongyy.com/pcimage/119h5/07.png">
        <div class='text'>暂无活动商品~</div>
      </div>
    </div>
    <!-- //预告特价 -->
    <div class='weekSpecials' v-if="this.showWeek">
      <TopBar type='3' :dataSourse='previewBanner' :length='previewEveryDay.length' />
      <div class='sreach_area' v-if="previewEveryDay.length>0">
        <div class='divtip'>
          <input type="text" v-model="everyDayKeyWord" placeholder="输入商品名、商品首字母、厂家">
          <div class='div' @click='search(everyDayKeyWord,"预告")'>搜索</div>
        </div>
      </div>
      <div class='tab_area'>
        <van-tabs ref='tabs' :ellipsis="false" v-model="activeTab" title-active-color='#FF540D' color='#FF540D' @click="changePreview">
          <van-tab v-for="(item,index) of previewEveryDay" :key="index" :title="item.name" :name="item.id">
            <div class='goods1_area' :id='item.id' v-if="everyDayGoodsList">
              <div class='item_block' v-for="(item,index) of everyDayGoodsList" :key="index">
                <div class='left'>
                  <img :src="item.img?item.img:'https://image.hezongyy.com/images/no_picture.gif'">
                  <img class='tip' v-if="item.quantity<=0" src="https://image.hezongyy.com/pcimage/119h5/ysq.png">
                </div>
                <div class='right'>
                  <div class='text1'>{{item.name}}</div>
                  <div class='text2'>{{item.manufacturerName}}</div>
                  <div class='text2'>规格：{{item.specification}}</div>
                  <div class='text2'>效期：{{item.expirationDate}}</div>
                  <div class='text2'>限购：{{item.maxBuyNumber}}</div>
                  <div class='text3'>
                    <span class='num'><span class='text'>预览价</span> {{item.activityPrice>0?'¥'+item.activityPrice:'定价中'}}</span><span class='num1'>¥{{item.retailPrice}}</span>
                    <div class='couponAfterPrice' v-if="item.couponFloorPrice&&item.couponCeilingPrice">
                      券后 {{'¥'+item.couponFloorPrice}}-{{'¥'+item.couponCeilingPrice}}
                    </div>
                    <div class='couponAfterPrice' v-if="!item.couponFloorPrice&&item.couponCeilingPrice">
                      券后{{'¥'+item.couponCeilingPrice}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
        <div class='null_goods1' v-if="!everyDayGoodsList||previewEveryDay.length==0">
          <img src="https://image.hezongyy.com/pcimage/119h5/07.png">
          <div class='text'>暂无预告商品~</div>
          <div class='text_desc' v-if="previewBanner.length>0&&previewEveryDay.length==0">{{previewBanner[0].desc}}</div>
        </div>
      </div>
    </div>
    <!-- //弹窗详情 -->
    <div style='position: relative;'>
      <van-action-sheet v-model="show" class="action-sheet">
        <div class='close' @click='close'><img :src="Xpng"></div>
        <div class="dialog_area">
          <div class='goods_block'>
            <span class='left'>
              <img :src="everyDayInfo.img">
            </span>
            <span class='right'>
              <div class='text1'>{{everyDayInfo.name}}</div>
              <!-- <div class='couponAfterPrice' v-if="this.showRoutine">券后约 {{everyDayInfo.couponAfterPrice}}</div> -->
              <div class='text2'>
                <span class='text2_left'>¥{{everyDayInfo.activityPrice?everyDayInfo.activityPrice:everyDayInfo.sellingPrice}}</span><span class='text2_right'>¥{{everyDayInfo.retailPrice}}</span>
              </div>
              <div class='text3' v-if="everyDayInfo.marketPrice>0">建议零售价：¥{{everyDayInfo.marketPrice}}</div>
            </span>
          </div>
          <div class='info_block'>
            <div class='title'>产品参数</div>
            <div class='item'><span class='name'>生产厂家</span><span class='value'>{{everyDayInfo.manufacturerName}}</span></div>
            <div class='item'><span class='name'>规格</span><span class='value'>{{everyDayInfo.specification}}</span></div>
            <div class='item'><span class='name'>效期</span><span class='value'>{{everyDayInfo.expirationDate}}</span></div>
            <div class='item'><span class='name'>生产批准</span><span class='value'>{{everyDayInfo.licenseNumber}}</span></div>
            <div class='item'><span class='name'>包装单位</span><span class='value'>{{everyDayInfo.unit}}</span></div>
            <div class='item'><span class='name'>件装量</span><span class='value'>{{everyDayInfo.piece}}</span></div>
            <div class='item'><span class='name'>中包装</span><span class='value'>{{everyDayInfo.packages}}</span></div>
            <div class='item1'>
              <span class='name' v-if="everyDayInfo.quantity <= 0">购买数量(库存:<span style="color:red">缺货</span>)</span>
              <span class='name' v-if="everyDayInfo.quantity >0">购买数量(库存:{{ everyDayInfo.quantity > 800 ? "充裕" : everyDayInfo.quantity }})</span>
              <span class='value'>限购:</span><span class='num'>{{everyDayInfo.maxBuyNumber}}</span>
              <span class='btn'>
                <div class='img' @click="goodsAdd.sub(everyDayInfo)">-</div>
                <div class='input'><input type="number" v-model.number="everyDayInfo.initializeMinimum" @blur="goodsAdd.onChange(everyDayInfo)"></div>
                <div class='img' @click="goodsAdd.plus(everyDayInfo)">+</div>
              </span>
            </div>
          </div>
          <div class='btn_block' @click='submit(everyDayInfo)'><img src="../../assets/image/btn.png"></div>
        </div>
      </van-action-sheet>
    </div>
    <div class='upgrade' @click='goTop'>
      <img src="https://image.hezongyy.com/pcimage/119h5/goup.png" alt="">
    </div>
  </div>
</template>
<script>
import { getRequest } from '../../api/indexGet'
import { postRequest } from '../../api/index'
import url from '../../axios/apiUrl'
import Xpng from '@/assets/image/X.png'
import TopBar from './topBar.vue'

export default {
  components: {
    TopBar,
  },
  data() {
    return {
      activeTab: '',
      everyDayKeyWord: '', //每日特价搜索词
      weekKeyWord: '', //预告预告搜索词
      Xpng, //图片关闭按钮
      loading: false, //加载
      finished: false, //加载完成
      showDay: true, //天天特价是否开启
      showRoutine: false, //常规特价是否开启
      showWeek: false, //周特价是否开启
      routineGoodsList: [], //常规特价商品列表
      everyDayGoodsList: [], //每日特价商品列表
      temp: {
        drugType: 0,
        isActivityPromotion: 1,
        isChoose: 0,
        isGift: 0,
        pageNumber: 1,
        pageSize: 10,
        keyWord: '', //常规特价搜索词
      },
      show: false, //弹窗开关
      hours: '00',
      minutes: '00',
      seconds: '00',
      nowTime: 0, //当前时间
      endTime: 0, //结束时间
      everyDayInfo: {}, ///弹窗信息详情
      dayBanner: [], //每日特价 banner
      routineBanner: [], //常规特价banner
      previewBanner: [], //预告banner
      id: '', //天天特价 id 从活动倒计时接口来id
      promitionInfo: {}, //活动信息倒计时详情
      previewEveryDay: [], //活动预告
      vanTab: false,
    }
  },
  async mounted() {
    //获取预告活动时间以及id
    this.previewEveryDayPromotionMsg()
    //倒计时
    await this.everyDayPromotionMsg()
    //顶部banner轮播图
    this.adPost()
    //每日特价信息
    this.everyDayPromotionGoods()
  },
  methods: {
    //回到顶部
    goTop() {
      let node = document.querySelector('.goods_area')
      let id = document.getElementById(this.promitionInfo.id)
      if (node) {
        node.scrollTop = 0
      } else {
        id.scrollTop = 0
      }
    },
    //选择天天特价预告  的活动日期
    changePreview(id, value) {
      this.promitionInfo.id = id
      this.everyDayKeyWord = ''
      this.everyDayPromotionGoods()
    },
    //获取预告活动时间以及id
    async previewEveryDayPromotionMsg() {
      let res = await getRequest(url.previewEveryDayPromotionMsg)
      if (res.data.code == '000000') {
        this.previewEveryDay = res.data.content
      } else {
        this.$toast(res.data.message)
      }
    },
    //顶部banner
    async adPost() {
      let res = await postRequest(url.adPost, {
        pageName: 'dailySpecials',
        clientType: 1,
      })
      if (res.data.code == '000000') {
        this.dayBanner = res.data.content.dailySpecialsBanner.items
        this.routineBanner = res.data.content.normalSpecialsBanner.items
        this.previewBanner = res.data.content.previewBanner.items
      }
    },
    //加入购物车
    async submit(item) {
      if (item.quantity != 0) {
        if (item.restriction == 0) {
          let res = await postRequest(url.addShopCar, {
            goodsId: item.id,
            type: item.cartBasketType,
            number: item.initializeMinimum,
          })
          if (res.data.code == '000000') {
            this.$toast('加入购物车成功~')
            this.show = false
          }
          if (res.data.message == '系统异常') {
            this.$toast('网络异常，请稍后再试')
          } else if (res.data.code != '000000') {
            this.$toast(res.data.message)
          }
        } else {
          if (item.initializeMinimum > item.maximum) {
            this.$toast('已超过最大购买量，不能加入购物车')
          } else {
            let res = await postRequest(url.addShopCar, {
              goodsId: item.id,
              type: item.cartBasketType,
              number: item.initializeMinimum,
            })
            if (res.data.code == '000000') {
              this.$toast('加入购物车成功~')
              this.show = false
            }
            if (res.data.message == '系统异常') {
              this.$toast('网络异常，请稍后再试')
            } else if (res.data.code != '000000') {
              this.$toast(res.data.message)
            }
          }
        }
      } else {
        this.$toast('该商品已售罄')
      }
    },
    //关闭弹窗
    close() {
      this.show = false
    },
    //加购弹窗
    showCards(item) {
      this.show = true
      this.everyDayInfo = item
    },
    //每日特价
    async everyDayPromotionGoods() {
      let params = {
        id: this.promitionInfo.id,
        keyWord: this.everyDayKeyWord,
      }
      let res = await postRequest(url.everyDayPromotionGoods, params)
      if (res.data.code == '000000') {
        this.everyDayGoodsList = res.data.content
        if (this.everyDayGoodsList) {
          this.everyDayGoodsList.map((obj) => {
            this.$set(obj, 'initializeMinimum', 1)
            this.$set(obj, 'maximum', obj.maxBuyNumber)
            this.goodsAdd.pageInit(obj, this)
          })
        }
      }
    },
    //常规特价搜索
    async search(value, name) {
      if (name == '常规') {
        this.temp.keyWord = value
        this.temp.pageNumber = 1
        await this.promotionActivity()
      } else if (name == '天天') {
        this.everyDayKeyWord = value
        await this.everyDayPromotionGoods()
      } else if (name == '预告') {
        this.everyDayKeyWord = value
        await this.everyDayPromotionGoods()
      }
      let node = document.querySelector('.goods_area')
      node.scrollTop = 0
    },
    //常规特价
    async promotionActivity() {
      let res = await postRequest(url.promotionActivity, this.temp)
      if (res.data.code == '000000') {
        if (this.temp.pageNumber == 1) {
          this.routineGoodsList = []
        }
        if (res.data.content == null) {
          this.finished = true
          return
        }
        this.loading = false
        this.temp.pageNumber++
        this.routineGoodsList = this.routineGoodsList.concat(
          res.data.content.list
        )

        if (res.data.content.list.length == 0) {
          // 数据全部加载完成
          this.finished = true
        } else {
          this.finished = false
        }
        if (this.routineGoodsList) {
          this.routineGoodsList.map((obj) => {
            this.$set(obj, 'initializeMinimum', 1)
            this.$set(obj, 'maximum', obj.maxBuyNumber)
            this.goodsAdd.pageInit(obj, this)
          })
        }
      } else {
        this.finished = true
        this.$toast(res.data.message)
      }
    },

    //选择tab切换天天 常规 预告预告
    changeSpecial(index) {
      this.activeTab = '' //切换的时候  清空掉预告活动当前选中的活动
      // 1每日特价2常规特价
      if (index == 1) {
        this.everyDayPromotionMsg()
        this.promitionInfo.id = this.promitionInfo.id
        this.showDay = true
        this.showRoutine = false
        this.showWeek = false
        this.temp.keyWord = ''
        this.everyDayKeyWord = ''
        setTimeout(() => {
          this.everyDayPromotionGoods()
        }, 500)
      } else if (index == 2) {
        this.temp.keyWord = ''
        this.everyDayKeyWord = ''
        this.showDay = false
        this.showWeek = false
        this.showRoutine = true
        this.temp.pageNumber = 1
        // this.promotionActivity()
      } else if (index == 3) {
        this.previewEveryDayPromotionMsg()
        if (this.previewEveryDay.length > 0) {
          this.promitionInfo.id = this.previewEveryDay[0].id
        }
        this.temp.keyWord = ''
        this.everyDayKeyWord = ''
        this.showWeek = true
        this.showDay = false
        this.showRoutine = false
        this.everyDayPromotionGoods()
      }
    },
    //活动倒计时
    async everyDayPromotionMsg() {
      let res = await getRequest(url.everyDayPromotionMsg)
      if (res.data.code == '000000') {
        this.promitionInfo = res.data.content
        this.countDownInit()
        this.getNowTime()
      } else if (res.data.code == '900000') {
        this.$toast('网络异常，请稍后再试！')
      } else {
        this.$toast(res.data.message)
      }
    },

    // 获取当前时间
    countDownInit() {
      this.curTime = setInterval(() => {
        this.promitionInfo.serverTime = this.promitionInfo.serverTime + 1000
      }, 1000)
    },
    // 计算时间
    getNowTime() {
      this.timeName = setInterval(() => {
        //计算距离本场开始剩余时间
        if (this.promitionInfo.status == 1) {
          // 结束时间时间戳
          if (this.promitionInfo.endTime - this.promitionInfo.serverTime > 0) {
            this.hours = Math.floor(
              ((this.promitionInfo.endTime - this.promitionInfo.serverTime) /
                1000 /
                60 /
                60) %
                24
            )
            // 判断小时是否大于24小时
            if (
              this.promitionInfo.endTime - this.promitionInfo.serverTime >
              86400000
            ) {
              let num = parseInt(
                (this.promitionInfo.endTime - this.promitionInfo.serverTime) /
                  86400000
              )
              this.hours = num * 24 + this.hours
            }
            this.minutes = Math.floor(
              ((this.promitionInfo.endTime - this.promitionInfo.serverTime) /
                1000 /
                60) %
                60
            )
            this.seconds = Math.floor(
              ((this.promitionInfo.endTime - this.promitionInfo.serverTime) /
                1000) %
                60
            )
            if (this.hours < 10) {
              this.hours = '0' + this.hours
            }
            if (this.minutes < 10) {
              this.minutes = '0' + this.minutes
            }
            if (this.seconds < 10) {
              this.seconds = '0' + this.seconds
            }
          } else {
            this.hours = '00'
            this.minutes = '00'
            this.seconds = '00'
            this.promitionInfo.status_ = 0
            this.status_ = 0
          }
        }
      }, 1000)
    },
  },
}
</script>
<style lang="less" src="./index.less" scoped></style>
